เป็น Work Shop การใช้ GAJAX ในการทำให้ textbox รับค่าเป็นตัวเลขอย่างเดียว สามารถใช้บน Notebook ได้ และด้วยการทำงานโดยใช้ GAJAX ทำให้เราสามารถสร้างฟังก์ชั่นเพียงครั้งเดียว แต่สามารถเรียกใช้ได้ในทุกส่วนของโปรเจ็ค โดยไม่ต้องเขียนโค้ดใหม่

<script type="text/javascript" src="gajax.js"></script>

 เรียกใช้ GAJAX ให้แทรก script นี้ไว้ในเพจหลักเสมอ และกำหนด path ของ gajax.js ให้ถูกต้อง

<script type="text/javascript">
// ฟังก์ชั่นสำหรับกำหนดให้รับค่าเป็นตัวเลขเท่านั้น
var numberOnly = function( event ) {
 var key = event.which || event.keyCode;
 if ( !( ( key > 95 && key < 106 ) ||  ( key > 47 && key < 58 ) || key == 8 || key == 9 || key == 37 || key == 39 ) ) {
  GEvent.stop(event);
  return false;
 };
};
</script>

 Javascript ในส่วนนี้ สามารถแยกเอาไว้ในหน้า script อื่นๆ ได้แล้ว include เข้ามา เพื่อให้สามารถเรียกใช้ได้ในหลายๆส่วนของเว็บไซต์

<input type="text" id="number1" name="text1" />
<input type="text" id="number2" name="text2" />

 โค้ด HTML ซึ่งเป็น Text box เพื่อรับการกรอกค่าตัวเลข ซึ่งต้องกำหนด id ให้แตกต่างกัน และ อาจจะเหมือนหรือไม่กับ name ก็ได้ ซึ่ง ค่า id ที่กำหนด จะถูกใช้โดย Javascript และ ค่า name จะถูกใช้เมื่อ submit

<script type="text/javascript">
$G("number1").addEvent("keydown", numberOnly);
$G("number2").addEvent("keydown", numberOnly);
</script>

โค้ด Javascript เพื่อกำหนด Event ให้กับ textbox ซึ่งจะเห็นว่า เราใช้ id ในการทำงาน โค้ดส่วนนี้จะต้องเขียนไว้หน้าเดียวกันกับ HTML และต้องเขียนหลังจากกำหนด HTML ที่เกี่ยวข้องแล้วเท่านั้น

ถ้าจะสังเกตุดูให้ดี จะเห็นได้ว่า โค้ด Javascript จะถูกแยกเด็ดขาดออกจากโค้ด HTML และเราสามารถย้ายเอาโค้ดส่วนที่เป็น Javascript ไปไว้บน ไฟล์ JS ภายนอกได้ แล้วค่อย include เข้ามาเมื่อจะใช้ ซึ่งเป็นสิ่งที่จำเป็นอย่างมากหากโค้ดของเราซับซ้อนขึ้น เนื่องจากโค้ดที่ได้จะดูเป็นระเบียบ สะอาดตา และมองหาง่ายยิ่งขึ้น

ตัวอย่าง ดูซอร์สโค้ด คลิกขวาแล้ว view source ดูเลยครับ